<template>
  <div class="app-container">
    <el-table :data="listData.list" v-loading.body="listLoading" element-loading-text="Loading" stripe border fit highlight-current-row>
      <el-table-column prop="id" label='ID' width="80" align="center"></el-table-column>
      <!-- <el-table-column prop="permission" :label='$t("rightAccess.description")' width="200">
        <template slot-scope="scope"><span>{{scope.row.permission | permFilter}}</span></template>
      </el-table-column> -->
      <el-table-column prop="desc" :label='$t("rightAccess.description")' min-width="160"></el-table-column>
      <el-table-column prop="url" :label='$t("rightAccess.url")' min-width="100"></el-table-column>
      <el-table-column prop="action" :label='$t("rightAccess.type")' min-width="100"></el-table-column>
      <el-table-column prop="permission_mod" :label='$t("rightAccess.module")' min-width="100">
        <template slot-scope="scope"><span>{{getModule(scope.row.permission_mod)}}</span></template>
      </el-table-column>
      <el-table-column prop="updated_at" :label='$t("rightAccess.lastModified")' width="200"></el-table-column>

    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.$page" :page-sizes="$store.state.app.pageSizeArr" :page-size="q.$size" layout="total, sizes, prev, pager, next, jumper" :total="listData.total_count">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { getPermList, saveUserPerm } from '@/api/role'

  export default {
    data() {
      return {
        listData: {},
        q: {$size: 30, $page: 1},
        listLoading: true,
        roleArray: this.$store.state.user.user_roles,
        editRow: null
      }
    },
    filters: {
      permFilter(perm) {
        const value = {
          1: '读',
          2: '写'
        }
        return value[perm]
      }
    },
    created() {
      this.getList()
    },
    deactivated(){
      this.listLoading = false
    },
    computed: {
      Module: function() {
        return [{value: this.$t('rightAccess.operation'), id: 1}, 
                {value: this.$t('rightAccess.card'), id: 2}, 
                {value: this.$t('rightAccess.range'), id: 3}, 
                {value: this.$t('rightAccess.order'), id: 4}, 
                {value: this.$t('rightAccess.record'), id: 5}, 
                {value: this.$t('rightAccess.console'), id: 6}, 
                {value: this.$t('rightAccess.exe'), id: 7}]
      }
    },
    methods: {
      getModule(id) {
        return this.Module.filter(m => m.id === id)[0].value
      },
      edit(row) {             
        this.editRow = row
      },
      update(row){
        saveUserPerm(row, row.id).then(res => {
          if(res.status === 0){
            this.editRow = null
            this.$message({ type: 'success', message: '编辑成功!' })
          }
        })
      },
      handleSizeChange (val) {
        this.q.$size = val
        this.getList()
      },
      handleCurrentChange (val) {
        this.q.$page = val
        this.getList()
      },
      getList() {
        let params = Object.assign({
          $orderby: 'id'
        }, this.q)
        this.listLoading = true
        getPermList(params).then(res => {
          if (res.status === 0) {
            this.listLoading = false
            this.listData = res.data
          }
        })
      }
    },
    watch: {
      showUpdate() {
        if(!this.showUpdate){
          this.getList()
        }
      }
    }
  }

  export const enRightAccess = {
    // Table
    id: 'ID',
    description: 'Description',
    url: 'Url',
    type: 'Type',
    module: 'Module',
    lastModified: 'Last Modified',

    operation: 'Operation Management',
    card: 'Card Management',
    range: 'Range Management',
    order: 'User Login',
    record: 'Bank Record Management ',
    console: 'Console Management',
    exe: 'Exe Management'
  }

  export const zhRightAccess = {
    // Table
    id: 'ID',
    description: '描述',
    url: '网址',
    type: '类型',
    module: '所属模块',
    lastModified: '最后修改时间',

    operation: '运行管理',
    card: '卡片管理',
    range: '范围管理',
    order: '订单管理',
    record: '银行记录管理 ',
    console: '控制台管理',
    exe: 'Exe管理'
  }

</script>
